/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 * @format
 */

/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

/* You can override the default Infima variables here. */
:root {
    /*
  --ifm-color-primary: #25c2a0;
  --ifm-color-primary-dark: rgb(33, 175, 144);
  --ifm-color-primary-darker: rgb(31, 165, 136);
  --ifm-color-primary-darkest: rgb(26, 136, 112);
  --ifm-color-primary-light: rgb(70, 203, 174);
  --ifm-color-primary-lighter: rgb(102, 212, 189);
  --ifm-color-primary-lightest: rgb(146, 224, 208);
  --ifm-code-font-size: 100%;
  */
}

.button--secondary {
    background-color: #61dafb;
    border-color: #61dafb;
}

body {
}

h1,h2,h4 {
}

.jumbotron {
    background: url("../../static/img/dark_blue_dots.jpg") no-repeat center center;
    background-size: cover;
    color: white;
    height: 250px;
}

.jumbotron p.lead {
}


.docusaurus-highlight-code-line {
  background-color: rgb(72, 77, 91);
  display: block;
  margin: 0 calc(-1 * var(--ifm-pre-padding));
  padding: 0 var(--ifm-pre-padding);
}

/* Announcement banner */

:root {
  --docusaurus-announcement-bar-height: auto !important;
}

div[class^="announcementBarContent"] {
  line-height: 40px;
  font-size: 20px;
  font-weight: bold;
  padding: 8px 30px;
}

div[class^="announcementBarContent"] a {
  text-decoration: underline;
  display: inline-block;
  color: var(--ifm-color-primary-lightest) !important;
}

div[class^="announcementBarContent"] a:hover {
  color: var(--brand) !important;
}

@media only screen and (max-width: 768px) {
  div[class^="announcementBarContent"] {
    font-size: 18px;
  }
}

@media only screen and (max-width: 500px) {
  div[class^="announcementBarContent"] {
    font-size: 15px;
    line-height: 22px;
    padding: 6px 30px;
  }
}
